<!--
    员工列表组件（主要用于弹出框，选中用户）
    1、组件的使用（在需要的页面-即父窗体中，引入该员工列表页面）
    2、组件的传值（弹出框选中值-单选一个用户），将选中的员工回填到父窗体

    【实现】
    子传父：这个页面作面为子页面，被弹出后，选中员工，点击确认，会把选中的值传给父页面（填充父页面的文本框）
    1）子页面中，按钮事件里用this.$emit进行传值。封装一个事件和值，即：this.$emit('事件名称'，值)
    2）在父页面中，该组件有一个事件，这个事件有参数：事件名称和值都是this.$emit传递的
-->

<template>
    <div style="height:100%;">
        <!--内容-->
        <div class="box mains">
            <!--操作按钮-->
            <div class="buttons">
                <el-row>
                    <el-col style="text-align:left;">
                        <el-input type="text" size="mini" v-model="search.key" style="width:300px;"></el-input>
                        <el-button type="success" size="mini" @click="eventSearch">查询</el-button>
                    </el-col>
                </el-row>
            </div>

            <!--显示列表-->
            <div class="contents">
                <el-table :data="listData" style="width:100%">                    
                    <el-table-column width="40">
                        <template slot-scope="scope">
                            <el-radio v-model="radioSelect" :label="scope.row.id"
                                @change.native.stop="(e) => handleRadioChange(e, scope.row)">&nbsp;</el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column prop="employeeNo" label="工号" width="80"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="age" label="年龄" width="80"></el-table-column>
                    <el-table-column prop="" label="性别" width="80"></el-table-column>
                    <el-table-column prop="" label="部门" width="120"></el-table-column>
                    <el-table-column prop="" label="职务" width="120"></el-table-column>
                </el-table>
            </div>

            <!--分页-->
            <div class="pages">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    current-page.sync="paged.pageIndex" :page-size="paged.pageSize" layout="total, prev, pager, next" :total="paged.total">
                </el-pagination>
            </div>
        </div>

        <div style="margin-top:20px;text-align:left;">
            <el-button type="success" @click="eventGetEmployee">确认</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            listData: [],
            radioSelect: '',
            selectValue:{},
            paged:{
                pageIndex:1,
                pageSize:5,
                total:0
            },
            search:{
                key:''
            }
        }
    },
    mounted() {
        this.initData()
    },
    methods: {
        handleRadioChange(e, row) {
            e.stopPropagation();
            this.currentRow = Object.assign({}, row);
            //console.log(this.currentRow)
            this.selectValue = row
        },

        //获取选中的员工
        eventGetEmployee() {
            this.$emit('eventEmployee', this.selectValue)
        },
       
        //初始化数据（页面在加载的时候执行，或点查询按钮的时候可以执行）
        initData() {
            this.$http.get(this.$baseUrl + 'hr/employee/query/pages',{
                params:{
                    employeeNo:'',
                    pageIndex:this.paged.pageIndex,
                    pageSize:this.paged.pageSize
                }
            }).then(x => {
                //console.log(x)
                this.listData = x.data.data.items
                this.paged.total = x.data.data.total
            })
        },

        //查询按钮事件
        eventSearch(){
            this.initData()
        },

        //分页相关事件
        handleSizeChange(val) {
            //console.log(`每页 ${val} 条`);
            this.paged.pageSize = val
            this.initData()
        },
        handleCurrentChange(val) {
            //console.log(`当前页: ${val}`);
            this.paged.pageIndex = val
            this.initData()
        },
    }
}
</script>

<style >
.mains {
    height: calc(100% - 45px);
}

.box {
    background: rgb(238, 240, 241);
}

.path {
    border-left: 4px solid darkorange;
    height: 35px;
    line-height: 35px;
    text-align: left;
    padding-left: 15px;
    font-size: 12px;
}

.buttons,
.contents {
    margin-top: 10px;
    padding-left: 15px;
    padding-top: 10px;
    padding-right: 15px;
}

.contents {
    height: calc(100% - 120px);
}

.pages {
    text-align: center;
    padding-right: 15px;
    margin-top: 10px;
}

.el-table {
    height: 100%;
}

.el-pagination button:disabled,
.el-pagination .btn-next,
.el-pagination .btn-prev,
.el-pager li {
    background-color: rgb(238, 240, 241);
}
</style>